<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>Sample 01 - マウスクリック or タッチした位置に徐々に近づかせてみよう!!</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script charset="UTF-8" src="enchant.js"></script>
        <script charset="UTF-8" src="dummysprite.enchant.js"></script>
        <script charset="UTF-8">
            // 使いやすくするおまじない
            enchant();
            // 初期化時処理
            window.onload = function() {
                var game = new Game(320, 320);
                var isTouch = false;    // タッチフラグ(タッチ中のみ true にする)
                var touchX  = null;     // タッチX座標
                var touchY  = null;     // タッチY座標
                
                game.onload = function() {
                    this.rootScene.backgroundColor = "black";
                    // ダミースプライト生成
                    var dummySprite = new DummySprite(20, 20, "red");
                    dummySprite.moveTo(160-10, 160-10);
                    this.rootScene.addChild(dummySprite);
                    
                    // タッチイベントを登録
                    this.rootScene.addEventListener("touchstart", function(e) { isTouch = true; }); // タッチ開始
                    this.rootScene.addEventListener("touchend", function(e) { isTouch = false; });  // タッチ終了
                    this.rootScene.addEventListener("touchmove", function(e) {
                        // タッチ位置をセット
                        touchX = e.localX;
                        touchY = e.localY;
                    });
                    
                    // エンターフレーム処理を登録(毎フレームよばれるやつ)
                    this.rootScene.addEventListener("enterframe", function(){
                        // タッチ中は移動させる
                        if (isTouch === true) {
                            // ダミースプライトからタッチした位置へのベクトル
                            var vx = touchX - dummySprite.x;
                            var vy = touchY - dummySprite.y;
                            // ベクトルを1/10した値分タッチした位置に近づく
                            dummySprite.x += vx*0.1;
                            dummySprite.y += vy*0.1;
                        }
                    });
                };
                game.start();
            };
        </script>
    </head>
    <body>
        <h1>Sample 01 - マウスクリック or タッチした位置に徐々に近づかせてみよう!!</h1>
    </body>
</html>